<template>
  <!-- 统计图表 -->
  <div ref="myChart" id="myChart" style="height:300px"></div>

</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    datas: {
      type: Array,
      default: () => { }
    },
    obj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  computed: {},
  watch: {
    datas: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  mounted() {
    const that = this;
    that.init();
    window.onresize = () => {
      that.myChart.resize();
    }

  },
  methods: {
    init() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 10,
          top: 10,
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置x轴轴线颜色为白色
              }
            },
            // x轴刻度
            axisTick: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            // 设置y轴单位
            name: '单位：个',
            // 将单位放在y轴顶部
            axisLabel: {
              color: '#fff',
            },
            // 去掉y轴横向线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff' // 设置x轴轴线颜色为白色
              }
            },
            // 去掉y轴网格线
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '已用',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '未用',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410],
            barWidth: 15, // 设置柱子宽度为15，可根据需要调整此数值
            // 柱子标签
            label: {
              show: true, // 开启显示标签
              position: 'top', // 标签位置在柱子顶部
              color: '#fff', // 标签文字颜色为白色
              formatter: '{c}' // 显示数据值，{c} 表示数据值
            }
          },

        ]
      };
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart);
      }
      // 绘制图表
      this.myChart.setOption(option)
    }

  }
};
</script>
<style lang="sess" scoped>
</style>